<template>
    <el-dialog :model-value="dialogVisible" title="修改密码" width="40%" :before-close="cancel" center>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="原密码" prop="password">
                <el-input v-model="ruleForm.originalpassword" type="password" />
            </el-form-item>
            <el-form-item label="新密码" prop="pass">
                <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { reactive, ref } from 'vue'
export default ({

    emits: ['handleClose'],
    props: {
        dialogVisible: {
            type: Boolean,
            default: true,
        },
    },
    setup(props, { emit }) {
        const formSize = ref('default')
        const ruleFormRef = ref()
        function cancel() {
            console.log("handleClose",)
            emit("handleClose");
        }
        const ruleForm = reactive({
            originalpassword: '',
            pass: '',
            checkPass: ''
        })
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'))
            } else {
                if (ruleForm.checkPass !== '') {
                    if (!ruleFormRef.value) return
                    ruleFormRef.value.validateField('checkPass', () => null)
                }
                callback()
            }
        }

        const validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码!'))
            } else if (value !== ruleForm.pass) {
                callback(new Error("确认密码不匹配!"))
            } else {
                callback()
            }
        }
        const rules = reactive({
            pass: [{ validator: validatePass, trigger: 'blur' }],
            checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        })
        const submitForm = (formEl) => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    console.log('submit!')
                    props.dialogVisible = false
                } else {
                    console.log(`ruleForm`, ruleForm);
                    console.log(`dialogVisible`, props.dialogVisible );
                    console.log('error submit!')
                    return false
                }
            })
        }

        const resetForm = (formEl) => {
            if (!formEl) return
            formEl.resetFields()
        }

        const options = Array.from({ length: 10000 }).map((_, idx) => ({
            value: `${idx + 1}`,
            label: `${idx + 1}`,
        }))
        return { cancel, ruleForm, rules, formSize, ruleFormRef, submitForm, resetForm, options }
    }

})
</script>

<style lang="scss" scoped></style>